<template>
  <div class="box">
      <div class="cnt">
              <div class="button">
                  <span class="span">
                    <a class="a1" href="#"><i class="el-icon-video-play"></i>&nbsp;播放</a>
                    <a class="a2" href="#">+</a>
                  </span>
                  <!-- <a class="a3" href="#"><i class="el-icon-folder-add"></i> (3766906)</a> -->
                  <a class="a3 a4" href="#"><i class="el-icon-folder-add" style="font-size: 14px; font-weight: 700; margin-right: 5px"></i>收藏热门50</a>
                  <a class="a3 a6" href="#">
                    热门单曲
                    <i class="el-icon-arrow-down"></i>
                    </a>
              </div>
      </div>
  </div>
</template>

<script>
import { getDetailList } from '@/api/RankingList'
export default {
  data () {
    return {
      res: {}
    }
  },
  props: {
    list: {
      type: Array
    },
    id: {
      type: Number,
      default: 19723756
    }
  },
  created () {
    this.getDetailList()
  },
  methods: {
    async getDetailList () {
      const { data } = await getDetailList()
      this.res = data.list[0]
    }
  },
  watch: {
    id: function (val) {
      this.res = this.list.filter(v => v.id === val)[0]
    },
    immediate: true
  }
}
</script>

<style scoped>
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .cnt{
        display: flex;
        justify-content: space-between;
        width: 640px;
        height: 31px;
        margin-bottom: 10px;
    }
    .h2 {
        font-size:20px;
        font-weight: normal;
        margin-top: 20px;
        color: #333;
    }
    .fc{
        height: 34px;
        line-height: 34px;
        font-size: 12px;
        margin-bottom: 20px;
    }
    .button{
        width: 640px;
        height: 31px;
        font-size: 12px;

    }
    .span{
        height: 31px;
        margin-right: 8px;
    }
    .a1{
        float: left;
        width: 62px;
        height: 31px;
        text-align: center;
        line-height: 31px;
        background-color: #3F8ED8;
        box-shadow:2px 2px 2px #ccc;
        color: #fff;
        border-top-left-radius:2px;
        border-bottom-left-radius:2px;
        border-right:1px solid #2D68A1;
    }
    .a2{
        float: left;
        width: 31px;
        height: 31px;
        line-height: 31px;
        background-color: #3F8ED8;
        text-align: center;
        box-shadow:2px 2px 2px #ccc;
        border-top-right-radius:2px;
        border-bottom-right-radius:2px;
        color: #fff;
    }
    .a3{
        display: inline-block;
        text-align: center;
        width: 100px;
        height: 31px;
        line-height: 31px;
        border-radius: 5px;
        background-color: #FFFFFF;
        box-shadow:2px 2px 2px #ccc;
        border: 1px solid #C4C4C4;
        margin-right:8px ;
        color: #000;
    }
    .a4{
        width: 100px;
    }
    .a5{
        width: 62px;
    }
    .a6{
      float: right;
        width: 92px;
        margin: 0;
    }
</style>
